<template>
  <Dialog
    :visible="deleteDialogVisible"
    @close="hangleCloseDeleteDialog"
    width="30%"
    top="40vh"
  >
    <div class="myDialog">
      <div class="content">
        <slot />
      </div>
    </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="hangleCloseDeleteDialog">取消</el-button>
          <el-button type="primary" @click="hangleConfirm">确认</el-button>
        </div>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import Dialog from './common/Dialog.vue'

const props = defineProps(["deleteDialogVisible"]);
const emits = defineEmits(["closeDeleteDialog", "confirm"]);

const hangleCloseDeleteDialog = () => {
  emits("closeDeleteDialog");
};

const hangleConfirm = () => {
  emits("confirm");
};
</script>

<style lang="less" scoped>
.myDialog {
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    font-size: 16px;
    // margin-bottom: 20px;
  }
}
.dialog-footer {
    width: 100%;
    text-align: center;

    :deep(.el-button) {
      width: 40%;
    }

    :deep(.el-button + .el-button) {
      margin-left: 20px;
    }
  }
</style>
